<template>
  <el-card>
    <div slot="header">商品列表</div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span>{{ props.row.imgUrl }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime | formatYMDhms }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="所属分类" prop="category"></el-table-column>
      <el-table-column label="商品价格" prop="price"></el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imgUrl"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" class="edit">
            编辑
          </el-button>
          <!-- 气泡框 -->
          <el-popconfirm
            @confirm="handleDelete(scope.row)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      background
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
import {getGoodsListReq, editGoodsReq, delGoodsReq} from '@/api/order'
export default {
  data() {
    return {
      squareUrl: '',
      tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
      dialogFormVisible: false, //编辑弹窗隐藏显示
      //弹窗数据
      formData: {
        name: '',
        category: '',
        price: '',
        imgUrl: '',
        goodsDesc: '',
        id: '',
      },
    }
  },
  //方法
  methods: {
    //获取数据函数
    async getData() {
      //提取数据
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getGoodsListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {data, total} = res.data
      //数据赋值
      this.total = total
      this.tableData = data
      data.map(v => {
        // console.log(v.imgUrl)
        this.imgUrl = v.imgUrl
      })

      //如果当前data为[] 且 当前页不等1 就退回上一页获取数据
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },

    //改变页码
    handleSizeChange(val) {
      //1 拿到当前每页条数 赋值给pageSize
      this.pageSize = val
      //2 拉取数据
      this.getData()
    },

    //改变当前页
    handleCurrentChange(val) {
      //1 拿到当前页码 赋值给currentPage
      this.currentPage = val
      //2 发请求
      this.getData()
    },

    // 编辑
    async handleEdit(row) {
      //  把弹窗开启
      this.dialogFormVisible = true
      // 数据回填  数据需要拷贝 为了数据脱绑
      this.formData = {...row}
    },

    //确定编辑
    async handleConfirm() {
      // 发送请求  数据可以多 但是不能少
      let res = await editGoodsReq(this.formData)
      //解构数据
      let {code, msg} = res.data
      //判断
      if (code === 0) {
        this.dialogFormVisible = false
        //重新拉取数据
        this.getData()
      }
    },

    // 删除
    async handleDelete(row) {
      // 获取id
      let {id} = row
      // 发请求
      let res = await delGoodsReq({id})
      // 解构数据
      let {code} = res.data
      // 判断
      if (code === 0) {
        // 拉取数据
        this.getData()
      }
    },
  },
  //created 生命周期初始化发请求
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.edit {
  margin-right: 10px;
}
</style>
